
<!doctype html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>章鱼-UI</title>
    <style>
        * {margin: 0; padding: 0; box-sizing: border-box;}
        img {max-width: 100%;}
        html {
            --button-height: 32px;
            --font-size: 14px;
            --button-bg: white;
            --button-active-bg: #eee;
            --border-radius: 4px;
            --color: #333;
            --border-color: #999;
            --border-color-hover: #666;
        }
        #app {
        }
        body {
            font-size: var(--font-size);
        }
    </style>
    <style>
        .demo {
            border: 1px solid #666;
            min-height: 100px;
        }
        .sider {
            background: #333;
            width: 150px;
        }
        .sider.slide-enter, .sider.slide-leave-to {
            margin-left: -150px;
        }
        .header {
            background: #999;
            height: 100px;
        }
        .footer {
            background: #ccc;
            height: 50px;
        }
    </style>
</head>
<body>
<div id="app">
    <g-layout style="height: 100vh;">
        <g-sider>sider</g-sider>
        <g-layout>
            <g-header>header</g-header>
            <g-content>content</g-content>
            <g-footer>footer</g-footer>
        </g-layout>
    </g-layout>
</div>
<script src="./src/app.js"></script>
</body>
</html>
